<template>
  <view>
    <view class="avatar" @click="showUser">
      <image
        :src="
          userInfo.avatar ? userInfo.avatar : '/static/icon/avatar-default.png'
        "
        class="avatar-img"
      />
    </view>

    <tui-drawer mode="left" :visible="showDrawer" @close="showDrawer = false">
      <view class="content">
        <view class="head">
          <image
            :src="
              userInfo.avatar
                ? userInfo.avatar
                : '/static/icon/avatar-default.png'
            "
            class="head-img"
            @click="toNav('info')"
          />
          <view class="mute" v-if="!openMute" @click="mute">
            <view class="iconfont icon-mute" style="color: #999" />
          </view>
          <view class="mute" v-else @click="closeMute">
            <view class="iconfont icon-mute" style="color: #ed4014" />
          </view>
        </view>
        <view class="info" @click="toNav('info')">
          <view>
            <view class="username">{{ userInfo.nickname }}</view>
            <view class="desc">{{ userInfo.departmentTitle }}</view>
          </view>
          <view class="right">
            <tui-icon
              name="qrcode"
              color="#999"
              size="20"
              unit="px"
              class="r"
            />
            <tui-icon name="arrowright" color="#999" size="23" unit="px" />
          </view>
        </view>
        <view class="status" @click="toNav('setStatus')">
          <view class="iconfont icon-edit" />
          <view class="text">设置你的状态</view>
        </view>
      </view>
      <tui-list-view unlined="all">
        <tui-list-cell
          padding="14px 15px"
          :size="16"
          unlined
          @click="toNav('my')"
        >
          <view class="cell-item">
            <view class="iconfont icon-user" style="color: #198fff" />个人主页
          </view>
        </tui-list-cell>
        <tui-list-cell
          padding="14px 15px"
          :size="16"
          unlined
          @click="toNav('wallet')"
        >
          <view class="cell-item">
            <view class="iconfont icon-wallet" style="color: #f65200" />钱包
          </view>
        </tui-list-cell>
        <tui-list-cell padding="14px 15px" :size="16" unlined>
          <view class="cell-item">
            <view class="iconfont icon-star" style="color: #feaf00" />收藏
          </view>
        </tui-list-cell>
        <tui-list-cell
          padding="14px 15px"
          :size="16"
          unlined
          @click="toNav('help')"
        >
          <view class="cell-item">
            <view
              class="iconfont icon-customerservice"
              style="color: #059f73"
            />帮助与客服
          </view>
        </tui-list-cell>
        <tui-list-cell
          padding="14px 15px"
          :size="16"
          unlined
          @click="toNav('setting')"
        >
          <view class="cell-item">
            <view class="iconfont icon-setting" style="color: #198fff" />
            设置
          </view>
        </tui-list-cell>
      </tui-list-view>
    </tui-drawer>
  </view>
</template>

<script>
import { config } from "@/config";
export default {
  name: "xbootUserDrawer",
  props: {},
  computed: {
    userInfo() {
      return this.$store.state.userInfo;
    },
  },
  data() {
    return {
      showDrawer: false,
      openMute: false,
    };
  },
  methods: {
    showUser() {
      if (this.isLogin()) {
        this.showDrawer = true;
      }
    },
    mute() {
      // #ifdef H5
      this.showDrawer = false;
      // #endif
      uni.showActionSheet({
        title: "勿扰模式（关闭通知）",
        itemList: ["30分钟", "1小时", "2小时"],
        success: (res) => {
          let index = res.tapIndex;
          if (index == 0) {
          } else if (index == 1) {
          } else if (index == 2) {
          }
          this.openMute = true;
        },
      });
    },
    closeMute() {
      // #ifdef H5
      this.showDrawer = false;
      // #endif
      uni.showModal({
        title: "关闭勿扰模式",
        content: "确认退出勿扰模式，恢复通知？",
        success: (res) => {
          if (res.confirm) {
            this.openMute = false;
          }
        },
      });
    },
    toNav(v) {
      this.showDrawer = false;
      if (v == "my") {
        uni.switchTab({
          url: "/pages/my/my",
        });
      } else if (v == "info") {
        uni.navigateTo({
          url: "/pages/my/info/info",
        });
      } else if (v == "setStatus") {
        uni.navigateTo({
          url: "/pages/my/setStatus/setStatus",
        });
      } else if (v == "wallet") {
        uni.navigateTo({
          url: "/pages/wallet/wallet",
        });
      } else if (v == "setting") {
        uni.navigateTo({
          url: "/pages/setting/setting",
        });
      } else if (v == "help") {
        uni.navigateTo({
          url:
            "/pages/public/webView/webView?url=" +
            config.domain +
            "/chat/chat.html?accessToken=" +
            this.getToken(),
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.avatar {
  margin-right: 10px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;

  .avatar-img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
  }
}

.content {
  width: 400rpx;
  padding: 0 15px;
  padding-top: var(--status-bar-height);

  .head {
    display: flex;
    justify-content: space-between;
    padding: 15px 0 10px 0;

    .head-img {
      width: 65px;
      height: 65px;
      border-radius: 50%;
    }

    .mute {
      padding: 2px 13px;
      border-radius: 18px;
      border: 1px solid #dadada;
      height: 100%;
      margin-top: 5px;

      .icon-mute {
        font-size: 21px;
      }
    }
  }

  .info {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .username {
      color: $xboot-text-color;
      font-weight: 500;
      font-size: 20px;
    }

    .desc {
      color: $xboot-text-color-grey;
      font-size: 13px;
    }

    .right {
      display: flex;
      align-items: center;
      margin-right: -5px;
    }
  }

  .status {
    display: flex;
    align-items: center;
    margin: 10px 0;
    padding: 3px 8px;
    height: 25px;
    background: $xboot-bg-color-grey;
    border-radius: 5px;
    color: $xboot-text-color-grey;

    .icon-edit {
      margin-right: 5px;
    }

    .text {
      font-size: 13px;
    }
  }
}

.cell-item {
  display: flex;
  align-items: center;

  .iconfont {
    font-size: 21px;
    margin-right: 12px;
  }
}
</style>
